// /**
//  * Copyright © 2015 Magento. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  ---------------------------------------------

@product-name-link__color: @text__color;
@product-name-link__color__active: @text__color;
@product-name-link__color__hover: @text__color;
@product-name-link__color__visited: @text__color;

@product-name-link__text-decoration: none;
@product-name-link__text-decoration__active: @link__hover__text-decoration;
@product-name-link__text-decoration__hover: @link__hover__text-decoration;
@product-name-link__text-decoration__visited: @link__hover__text-decoration; 
//

//
//    Common
//--------------------------------------

& when (@media-common = true) {

    // Product Lists
    .products {
        margin: @indent__l 0;
    }
    #product-comparison .product-item-actions {
        padding:0;
        position:relative;
    }
    .products-list { 
        .product-items {
            .product-item-info {
                .product-item-details {
                    .product-item-inner {
                        .product-item-actions {
                            width: auto;
                            position: relative;
                        }
                    }
                }
            }
        }
    }
    .products-list {
        .widget-new-list {
            .product-item {
                .product-item-info {
                    .product-item-details {
                        .product-item-actions {
                            width: auto;
                            position: relative;
                        }
                    }
                }
            }
        }
    }
    .products-list {
        .widget-viewed {
            .product-item {
                .product-item-info {
                    .product-item-details {
                        .product-item-actions {
                            width: auto;
                            position: relative;
                        }
                    }
                }
            }
        }
    }
    .products-list {
        .widget-compared {
            .product-item {
                .product-item-info {
                    .product-item-details {
                        .product-item-actions {
                            width: auto;
                            position: relative;
                        }
                    }
                }
            }
        }
    }
    .product-item-photo {
        .product-image-container {
            .product-image-wrapper {
                .product-image-photo {
                    transition:all 0.4s ease 0s;
                    -webkit-transition:all 0.4s ease 0s;
                    border: none !important;
                }
            }
        }
    }
    .product-slider {
        .product-item {
            .product-item-actions {
                transition:all 0.3s ease 0s;
                -webkit-transition:all 0.3s ease 0s;
                bottom:-70px;
            }
            &:hover {
                .product-item-actions {
                    bottom:0;
                } 
            }
        }
    }
    .product {
        &-items {
            &:extend(.abs-reset-list all);
        }
        &-item {
            vertical-align: top;
            .products-grid & {
                width: 48.5%;
                margin-left: calc(~"(100% - 2 * 48.5%) / 1");
                padding: 0;
                display: inline-block;
                padding: 0;
                background: #ffffff;
                transition:all 0.3s ease 0s;
                -webkit-transition:all 0.3s ease 0s;
                position:relative;
                overflow:hidden;
                margin-bottom:15px;
                &:nth-child(2n+1) {
                    margin-left: 0;
                }
                .product-item-inner {
                    padding: 0;
                    position: relative;
                    z-index: 1;
                    .product-item-actions {
                        background: transparent;
                        display: block;
                        margin: 0;
                        padding: 17px 10px;
                        box-sizing:border-box;
                        position: absolute;
                        width: 100%;
                        z-index: 9;
                        transition:all 0.3s ease 0s;
                        -webkit-transition:all 0.3s ease 0s;
                        .actions-primary {
                            display: table-cell;
                        }
                        .actions-secondary {
                            display: table-cell;
                            padding-left: 10px;
                            width: 50%;
                        }
                    }
                }
                &:hover {
                    .product-item-photo {
                        .product-image-container {
                            .product-image-wrapper {
                                .product-image-photo {
                                    transform: scale(1.06);
                                }
                            }
                        }
                    }
                    /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
                    transform: translateY(-3px);
                    .product-item-actions {
                        bottom:0;
                    }
                }
            }
            &:extend(.abs-add-box-sizing all);

            &-name {
                &:extend(.abs-product-link all);
                display: block;
                margin: @indent__xs 0;
                word-wrap: break-word;
                -webkit-hyphens: auto;
                -moz-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;
            }

            &-info {
                width: 152px;
                position: relative;
                max-width: 100%;
                .page-products & {
                    width: 240px;
                }
            }

            &-actions {
                /*display: none;*/
                .actions-secondary {
                    > .action {
                        &:extend(.abs-actions-addto all);
                        &:before {
                            margin: 0;
                        }
                        span {
                            &:extend(.abs-visually-hidden all);
                        }
                    }
                }
            }
            &-description {
                margin: @indent__m 0;
            }
            .product-reviews-summary {
                .rating-summary {
                    margin: 0 4px 0 0;
                }
                .reviews-actions {
                    margin-top: 5px;
                    text-transform: lowercase;
                    font-size: @font-size__s;
                }
            }

            .price-box {
                margin: @indent__s 0 10px;
                /*padding:0 10px;*/
                .price {
                    font-weight: bold;
                }
                .price-label {
                    font-size: @font-size__s;
                    .lib-css(color, @text__color__muted);
                }
            }

            .old-price {
                margin: @indent__xs 0;
                .price {
                    font-weight: normal;
                }
            }

            .minimal-price {
                .price-container {
                    display: block;
                }
            }

            .minimal-price-link {
                margin-top: @indent__xs;
            }

            .price-from,
            .price-to {
                margin: 0;
            }

            .tocompare {
                .lib-icon-font-symbol(
                @icon-compare-full
                );
            }
            .tocart {
                white-space: nowrap;
                border-radius: 0;
                .lib-font-size(13px);
                line-height: 1;
                padding-top: @indent__s;
                padding-bottom: @indent__s;
            }
        }
    }

    .column.main {
        .product {
            &-items {
                /*margin-left: -20px;*/
            }
            &-item {
                /*padding-left: 20px;*/
            }
        }
    }

    .price-container {
        .price {
            .lib-font-size(14);
        }

        .price-including-tax + .price-excluding-tax,
        .weee {
            margin-top: 5px;
        }

        .price-including-tax + .price-excluding-tax,
        .weee,
        .price-including-tax + .price-excluding-tax .price,
        .weee .price,
        .weee + .price-excluding-tax:before,
            .weee + .price-excluding-tax .price {
            .lib-font-size(11);
        }

        .weee {
            &:before {
                content: "("attr(data-label) ": ";
            }
            &:after {
                content: ")";
            }
            + .price-excluding-tax {
                &:before {
                    content: attr(data-label) ": ";
                }
            }
        }
    }

    .products-list {
        .product {
            &-item {
                display: table;
                width: 100%;

                &-info {
                    display: table-row;
                }
                &-photo {
                    width: 1%;
                    padding: 0 @indent__l @indent__l 0;
                    vertical-align: top;
                    display: table-cell;
                }
                &-details {
                    vertical-align: top;
                    display: table-cell;
                }
            }
        }
        .product-image-wrapper {
            &:extend(.abs-reset-image-wrapper all);
        }
    }

}

//
//    Mobile
//--------------------------------------

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .products-list .product {
        &-item {
            table-layout: fixed;
            &-photo {
                padding: 0 @indent__s @indent__s 0;
                width: 30%;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .product-item-info {
        .products-grid & {
            &:hover,
                &.active {

                .product-item-inner {
                    display: block;
                }
            }
        }
    }
    .product-item-inner {
        .products-grid & {

        }
    }

    .product-item-actions {
        display: block;
        background: none repeat scroll 0 0 #ffffff;
        margin: 0;
        padding: 17px 10px;
        box-sizing:border-box;
        position: absolute;
        width: 100%;
        z-index: 9;
        transition:all 0.3s ease 1s;
        -webkit-transition:all 0.3s ease 1s;
        .products-grid & {
            margin: 0;
        }
        .actions-primary + .actions-secondary {
            display: table-cell;
            width: 50%;
            padding-left: 10px;
            > .action {
                margin-right: 10px;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
        .actions-primary { display: table-cell; }
    }

    .products-grid {
        .product-item-info {
            &:not(:hover) {
                &:not(.active) {
                    .product-item-inner {
                        padding: 0;
                        position: relative;
                        z-index: 1;
                    }
                }
            }
        }
    }

    .products-grid {
        .product-item {
            width: 100%/3;
            margin-bottom: @indent__base;
        }
    }

    .page-layout-1column .products-grid .product-item { width: 100%/3 }
    .page-layout-3columns .products-grid .product-item { width: 100%/3 }
    .page-products .products-grid .product-item { 
        width: 32%;
        margin-left: calc(~"(100% - 3 * 32%) / 2");
        padding: 0;
        background: #ffffff;
        transition:all 0.3s ease 0s;
        -webkit-transition:all 0.3s ease 0s;
        position:relative;
        overflow:hidden;
        &:nth-child(2n+1) {
            margin-left: calc(~"(100% - 3 * 32%) / 2");
        }
        &:nth-child(3n+1) {
            margin-left: 0;
        }
        .product-item-actions {
            bottom: -70px;
            transition:all 0.3s ease 0s;
            -webkit-transition:all 0.3s ease 0s;
        }
        &:hover {
            .product-item-photo {
                .product-image-container {
                    .product-image-wrapper {
                        .product-image-photo {
                            transform: scale(1.06);
                        }
                    }
                }
            }
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
            transform: translateY(0);
            .product-item-actions {
                bottom:0;
            }
        }
    }
    .page-products.page-layout-1column .products-grid .product-item { 
        width: 32%;
        margin-left: calc(~"(100% - 3 * 32%) / 2");
        padding: 0;
        background: #ffffff;
        transition:all 0.3s ease 0s;
        -webkit-transition:all 0.3s ease 0s;
        position:relative;
        overflow:hidden;
        &:nth-child(3n+1) {
            margin-left: 0;
        }
        .product-item-actions {
            bottom: -70px;
            transition:all 0.3s ease 0s;
            -webkit-transition:all 0.3s ease 0s;
        }
        &:hover {
            .product-item-photo {
                .product-image-container {
                    .product-image-wrapper {
                        .product-image-photo {
                            transform: scale(1.06);
                        }
                    }
                }
            }
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
            transform: translateY(0);
            .product-item-actions {
                bottom:0;
            }
        }
    }
    .page-products.page-layout-3columns .products-grid .product-item { 
        width: 32%;
        margin-left: calc(~"(100% - 3 * 32%) / 2");
        padding: 0;
        background: #ffffff;
        transition:all 0.3s ease 0s;
        -webkit-transition:all 0.3s ease 0s;
        position:relative;
        overflow:hidden;
        &:nth-child(3n+1) {
            margin-left: 0;
        }
        .product-item-actions {
            bottom: -70px;
            transition:all 0.3s ease 0s;
            -webkit-transition:all 0.3s ease 0s;
        }
        &:hover {
            .product-item-photo {
                .product-image-container {
                    .product-image-wrapper {
                        .product-image-photo {
                            transform: scale(0);
                        }
                    }
                }
            }
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
            transform: translateY(-3px);
            .product-item-actions {
                bottom:0;
            }
        }
    }
}

//    Desktop
//--------------------------------------

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-products .products-grid .product-item { 
        width: 32%;
        margin-left: calc(~"(100% - 3 * 32%) / 2");
        padding: 0;
        background: #ffffff;
        transition:all 0.3s ease 0s;
        -webkit-transition:all 0.3s ease 0s;
        position:relative;
        overflow:hidden;
        &:nth-child(2n+1) {
            margin-left: calc(~"(100% - 3 * 32%) / 2");
        }
        &:nth-child(3n+1) {
            margin-left: 0;
        }
        .product-item-actions {
            bottom: -70px;
            transition:all 0.3s ease 0s;
            -webkit-transition:all 0.3s ease 0s;
        }
        &:hover {
            .product-item-photo {
                .product-image-container {
                    .product-image-wrapper {
                        .product-image-photo {
                            transform: scale(1.06);
                        }
                    }
                }
            }
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
            transform: translateY(0);
            .product-item-actions {
                bottom:0;
            }
        }
    }
    .page-products.page-layout-1column .products-grid .product-item {
        width: 23.439%;
        margin-left: calc(~"(100% - 4 * 23.439%) / 3");
        padding: 0;
        background: #ffffff;
        transition:all 0.3s ease 0s;
        -webkit-transition:all 0.3s ease 0s;
        position:relative;
        overflow:hidden;
        &:nth-child(3n+1) {
            margin-left: calc(~"(100% - 4 * 23.439%) / 3");
        }
        &:nth-child(4n+1) {
            margin-left: 0;
        }
        .product-item-actions {
            bottom: -70px;
            transition:all 0.3s ease 0s;
            -webkit-transition:all 0.3s ease 0s;
        }
        &:hover {
            .product-item-photo {
                .product-image-container {
                    .product-image-wrapper {
                        .product-image-photo {
                            transform: scale(1.06);
                        }
                    }
                }
            }
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
            transform: translateY(0);
            .product-item-actions {
                bottom:0;
            }
        }
    }
    .page-products.page-layout-3columns .products-grid .product-item { 
        width: 48.5%;
        margin-left: calc(~"(100% - 2 * 48.5%) / 1");
        padding: 0;
        background: #ffffff;
        transition:all 0.3s ease 0s;
        -webkit-transition:all 0.3s ease 0s;
        position:relative;
        overflow:hidden;
        &:nth-child(3n+1) {
            margin-left: calc(~"(100% - 2 * 48.5%) / 1");
        }
        &:nth-child(2n+1) {
            margin-left: 0;
        }
        .product-item-actions {
            bottom: -70px;
            transition:all 0.3s ease 0s;
            -webkit-transition:all 0.3s ease 0s;
        }
        &:hover {
            .product-item-photo {
                .product-image-container {
                    .product-image-wrapper {
                        .product-image-photo {
                            transform: scale(1.06);
                        }
                    }
                }
            }
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
            transform: translateY(0);
            .product-item-actions {
                bottom:0;
            }
        }
    }
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .products-grid .product-item { width: 100%/5 }
    .page-layout-1column .products-grid .product-item { width: 100%/6 }
    .page-layout-3columns .products-grid .product-item { width: 100%/4 }
    .page-products .products-grid .product-items { margin: 0; }
    .page-products .products-grid .product-item {
        width: 23.439%;
        margin-left: calc(~"(100% - 4 * 23.439%) / 3");
        padding: 0;
        background: #ffffff;
        transition:all 0.3s ease 0s;
        -webkit-transition:all 0.3s ease 0s;
        position:relative;
        overflow:hidden;
        &:nth-child(3n+1) {
            margin-left: calc(~"(100% - 4 * 23.439%) / 3");
        }
        &:nth-child(4n+1) {
            margin-left: 0;
        }
        .product-item-actions {
            bottom: -70px;
            transition:all 0.3s ease 0s;
            -webkit-transition:all 0.3s ease 0s;
        }
        &:hover {
            .product-item-photo {
                .product-image-container {
                    .product-image-wrapper {
                        .product-image-photo {
                            transform: scale(1.06);
                        }
                    }
                }
            }
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
            transform: translateY(0);
            .product-item-actions {
                bottom:0;
            }
        }
    }
    .page-products.page-layout-1column .products-grid .product-item { 
        width: 18.99%;
        margin-left: calc(~"(100% - 5 * 19%) / 4");
        padding: 0;
        background: #ffffff;
        transition:all 0.3s ease 0s;
        -webkit-transition:all 0.3s ease 0s;
        position:relative;
        overflow:hidden;
        &:nth-child(3n+1) {
            margin-left: calc(~"(100% - 5 * 19%) / 4");
        }
        &:nth-child(4n+1) {
            margin-left: calc(~"(100% - 5 * 19%) / 4");
        }
        &:nth-child(5n+1) {
            margin-left: 0;
        }
        .product-item-actions {
            bottom: -70px;
            transition:all 0.3s ease 0s;
            -webkit-transition:all 0.3s ease 0s;
        }
        &:hover {
            .product-item-photo {
                .product-image-container {
                    .product-image-wrapper {
                        .product-image-photo {
                            transform: scale(1.06);
                        }
                    }
                }
            }
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
            transform: translateY(0);
            .product-item-actions {
                bottom:0;
            }
        }
    }
    .page-products.page-layout-3columns .products-grid .product-item { 
        width: 32%;
        margin-left: calc(~"(100% - 3 * 32%) / 2");
        padding: 0;
        background: #ffffff;
        transition:all 0.3s ease 0s;
        -webkit-transition:all 0.3s ease 0s;
        position:relative;
        overflow:hidden;
        &:nth-child(2n+1) {
            margin-left: calc(~"(100% - 3 * 32%) / 2");
        }
        &:nth-child(3n+1) {
            margin-left: 0;
        }
        .product-item-actions {
            bottom: -70px;
            transition:all 0.3s ease 0s;
            -webkit-transition:all 0.3s ease 0s;
        }
        &:hover {
            .product-item-photo {
                .product-image-container {
                    .product-image-wrapper {
                        .product-image-photo {
                            transform: scale(1.06);
                        }
                    }
                }
            }
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
            transform: translateY(0);
            .product-item-actions {
                bottom:0;
            }
        }
    }
}
